import React, { Children } from 'react'
import 'styles/components/space.scss'

const Space = props => {
  const {
    size = 'small',
    className,
    children,
    direction = 'horizontal',
    ...otherProps
  } = props;

  const sizeMap = new Map([
    ['small', 8],
    ['middle', 12],
    ['large', 20],
  ]);

  const marginDirection = direction === 'horizontal' ? 'marginRight' : 'marginBottom';

  const len = children.length;

  if (len === 0) {
    return null
  }

  return (
    <div className={`space space-${direction} ${className || ''}`} {...otherProps}>
      {
        Children.map(children, (child, index) => (
          child && <div
            key={`space-${index}`}
            style={
              (index === len - 1 || (child.props.style && child.props.style.display === 'none')) ? {} : {[marginDirection]: sizeMap.get(size) || size}
            }
          >
            {child}
          </div>
        ))
      }
    </div>
  )
};

export default Space
